<template>
    <div>
        <!-- 准备具有宽高的容器 -->
        <div id="chart" style="width: 100%; height: 400px" ref="chart"></div>
    </div>
</template>

<script>
  // import * as Echarts from 'echarts';

  export default {
    name: 'echarts01',
    data () {
      return {
        chart: null
      }
      }, //图表实例
    mounted () {
      this.init()
      window.addEventListener('resize', () => {
        this.chart.resize();
      });

    },
    methods: {
      init () {
        console.log(this.$Echarts)
        //2.初始化
        this.chart = this.$Echarts.init(this.$refs.chart)
        //3.配置数据
        let option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }]
        };

        // 4.传入数据
        this.chart.setOption(option)
      },

    },
  }
</script>

<style scoped>

</style>
